<template>
  <drawer-panel v-model="dialogVisible" title="新增设备" size="892px">
    <div class="tab-blue">
      <div class="tab-blue-header">
        <div
          class="tab-blue-header-item"
          :class="{
            active: active == item
          }"
          @click="handleTabClick(item)"
          v-for="item in tabs"
          :key="item"
        >
          {{ item }}
        </div>
      </div>
      <div class="tab-blue-body">
        <equipment-input v-if="active == '设备信息'"></equipment-input>
        <monitor-items v-else></monitor-items>
      </div>
    </div>
  </drawer-panel>
</template>

<script>
import EquipmentInput from '@/views/reservoir/shuiYuQingJianCe/siteManagement/components/EquipmentInput'
import MonitorItems from '@/views/reservoir/shuiYuQingJianCe/siteManagement/components/MonitorItems'

export default {
  name: 'EquipmentDrawer',
  components: {
    EquipmentInput,
    MonitorItems
  },
  data() {
    return {
      dialogVisible: false,
      active: '设备信息',
      tabs: ['设备信息', '监测项目']
    }
  },
  methods: {
    handleTabClick(item) {
      this.active = item
    },
    open() {
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
